<template>
	<view class="container">
		<view class="form-box">
			<view class="form-item">
				<view class="label">
					手机号码
				</view>
				<view class="form-content">
					<view class="input-box">
						<input type="number" v-model="mobile" placeholder="请输入要开通社区代理的手机号"
							placeholder-class="pla-class" />
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					验证码
				</view>
				<view class="form-content">
					<view class="input-box getcode">
						<input type="number" placeholder="请输入短信验证码" placeholder-class="pla-class" />
						<uv-toast ref="toast"></uv-toast>
						<uv-code :seconds="seconds" ref="code" @change="codeChange"></uv-code>
						<view @tap="getCode" class="getbtn">
							{{tips}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="pay-type">
			<view class="p-1">
				<view class="item">
					<view class="left">
						<image :src="$img_path('/pagesRegion/2.png')" mode="widthFix"></image>
						<view class="name">
							<view class="n-1">
								微信支付
							</view>
						</view>
					</view>

					<image v-if="true" :src="$img_path('/pagesMine/14.png')" mode="widthFix"></image>
					<image v-else :src="$img_path('/pagesMine/15.png')" mode="widthFix"></image>
				</view>
				<!-- <view class="item">
					<view class="left">
						<image :src="$img_path('/pagesRegion/3.png')" mode="widthFix"></image>
						<view class="name">
							<view class="n-1">
								第三方支付
							</view>
						</view>
					</view>
					
					<image v-if="true" :src="$img_path('/pagesMine/14.png')" mode="widthFix"></image>
					<image v-else :src="$img_path('/pagesMine/15.png')" mode="widthFix"></image>
				</view> -->
			</view>
			<!-- <view class="p-2">
				<view class="item">
					<view class="left">
						<image :src="$img_path('/pagesRegion/4.png')" mode="widthFix"></image>
						<view class="name">
							<view class="n-1">
								余额支付
							</view>
							<text>余额：￥500.00</text>
						</view>
					</view>
					
					<image v-if="true" :src="$img_path('/pagesMine/14.png')" mode="widthFix"></image>
					<image v-else :src="$img_path('/pagesMine/15.png')" mode="widthFix"></image>
				</view>
			</view> -->
		</view>


		<view class="bottom-btn">
			<view class="b-box">
				<button>立即支付</button>
			</view>
		</view>
	</view>
</template>

<script>
	import * as api from '@/utils/api/public.js'
	export default {
		data() {
			return {
				tips: '',
				seconds: 60,
				mobile: ''
			};
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			async getCode() {
				if (this.$refs.code.canGetCode) {
					const {
						code,
						data
					} = await api.sendCode({
						mobile: this.mobile,
						event: 'agent'
					})
					if (code == 1) {
						this.$refs.code.start();
					}
				} else {
					uni.showToast({
						title: '倒计时结束后再发送',
						icon: "none"
					})
				}
			},
		}
	}
</script>
<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	.container {
		padding-bottom: calc(constant(safe-area-inset-bottom) + 140rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);

		.form-box {
			padding: 24rpx 22rpx;
			box-sizing: border-box;

			.form-item {
				padding-bottom: 36rpx;

				.label {
					font-weight: bold;
					font-size: 36rpx;
					color: #000000;
					line-height: 50rpx;
				}

				.form-content {
					margin-top: 20rpx;

					.input-box {
						width: 100%;
						height: 88rpx;
						background: #FFFFFF;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						border: 2rpx solid #9E9E9E;
						padding: 0 20rpx;
						box-sizing: border-box;
						position: relative;

						input {
							width: 100%;
							height: 100%;
						}

						/deep/ .pla-class {
							font-weight: 400;
							font-size: 32rpx;
							color: #B4B4B4;
							line-height: 44rpx;
						}

						&.getcode {
							input {
								width: 50%;
							}
						}

						.getbtn {
							position: absolute;
							width: 200rpx;
							height: 100%;
							top: 0;
							right: 0;
							display: flex;
							align-items: center;
							justify-content: center;
							font-weight: 400;
							font-size: 32rpx;
							color: #E72A2A;
							line-height: 44rpx;
						}
					}
				}
			}
		}

		.pay-type {
			border-top: 20rpx solid #EEEEEE;

			.p-1 {
				padding: 12rpx 22rpx 20rpx;
				box-sizing: border-box;
				border-bottom: 2rpx solid #EEEEEE;
			}

			.p-2 {
				padding: 0 22rpx;
				border-bottom: 2rpx solid #EEEEEE;
			}

			&>view {
				.item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 22rpx 0;

					.left {
						display: flex;
						align-items: center;

						image {
							width: 57rpx;
							height: 57rpx;
						}

						.name {
							padding-left: 20rpx;

							.n-1 {
								font-weight: bold;
								font-size: 32rpx;
								color: #000000;
								line-height: 44rpx;
							}

							&>text {
								font-weight: 400;
								font-size: 28rpx;
								color: #333333;
								line-height: 40rpx;
								margin-top: 8rpx;
							}
						}
					}

					&>image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}

		.bottom-btn {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			background-color: #FFFFFF;

			.b-box {
				padding: 20rpx 22rpx;
				box-sizing: border-box;

				button {
					width: 100%;
					height: 96rpx;
					background: linear-gradient(135deg, #FFA233 0%, #FB4C4C 100%);
					border-radius: 80rpx;
					font-weight: bold;
					font-size: 36rpx;
					color: #FFFFFF;
					line-height: 96rpx;
				}
			}
		}
	}
</style>